<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人力资源管理系统 - 员工管理</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2563eb',
            secondary: '#64748b',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
            dark: '#1e293b',
            light: '#f8fafc'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 引入公共CSS -->
  <link rel="stylesheet" href="css/common.css">

  <!-- 引入API和公共JS -->
  <script src="js/api.js"></script>
  <script src="js/common.js"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
  <div id="app" class="flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <aside id="sidebar" class="w-64 bg-white border-r border-gray-200 flex-shrink-0 hidden md:block transition-all duration-300">
      <div class="p-5 border-b border-gray-200">
        <h1 class="text-xl font-bold text-primary">人力资源管理系统</h1>
      </div>

      <nav class="p-3">
        <ul>
          <li>
            <a href="index.html" class="sidebar-item">
              <i class="fa fa-dashboard"></i>
              <span>仪表盘</span>
            </a>
          </li>
          <li>
            <a href="projects.html" class="sidebar-item">
              <i class="fa fa-briefcase"></i>
              <span>项目中心</span>
            </a>
          </li>
          <li>
            <a href="employees.html" class="sidebar-item active">
              <i class="fa fa-users"></i>
              <span>员工管理</span>
            </a>
          </li>
          <li>
            <a href="tasks.html" class="sidebar-item">
              <i class="fa fa-tasks"></i>
              <span>任务管理</span>
            </a>
          </li>
          <li>
            <a href="skill-management.html" class="sidebar-item">
              <i class="fa fa-cogs"></i>
              <span>技能管理</span>
            </a>
          </li>
          <li>
            <a href="reports.html" class="sidebar-item">
              <i class="fa fa-bar-chart"></i>
              <span>分析报表</span>
            </a>
          </li>
        </ul>
      </nav>

      <div class="absolute bottom-0 w-full p-4 border-t border-gray-200">
        <div class="flex items-center gap-3">
          <img id="userAvatar" src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
          <div>
            <p id="user" class="font-medium text-sm">张三</p>
            <p id="userRole" class="text-xs text-gray-500">项目经理</p>
          </div>
          <button id="logoutBtn" class="ml-auto text-gray-500 hover:text-danger">
            <i class="fa fa-sign-out"></i>
          </button>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航 -->
      <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6">
        <div class="flex items-center">
          <button id="sidebarToggle" class="md:hidden mr-4 text-gray-500">
            <i class="fa fa-bars text-xl"></i>
          </button>
          <h2 id="pageTitle" class="text-lg font-semibold">员工管理</h2>
        </div>

        <div class="flex items-center gap-4">
          <div class="relative">
            <input type="text" placeholder="搜索..." id="globalSearch" class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>

          <button id="notificationBtn" class="relative text-gray-500 hover:text-primary">
            <i class="fa fa-bell text-xl"></i>
            <span id="notificationCount" class="absolute -top-1 -right-1 bg-danger text-white text-xs w-4 h-4 rounded-full flex items-center justify-center">3</span>
          </button>
        </div>
      </header>

      <!-- 页面内容 -->
      <div class="flex-1 overflow-y-auto p-6">
        <div class="flex flex-wrap gap-3 mb-6">
          <div class="relative flex-1 min-w-[200px]">
            <input type="text" id="talentSearch" placeholder="搜索人员..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>

          <select id="talentSkillFilter" class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <option value="">所有技能</option>
            <option value="前端开发">前端开发</option>
            <option value="后端开发">后端开发</option>
            <option value="DevOps">DevOps</option>
            <option value="数据科学">数据科学</option>
          </select>

          <select id="talentStatusFilter" class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <option value="">所有状态</option>
            <option value="可用">可用</option>
            <option value="忙碌">忙碌</option>
            <option value="休假">休假</option>
          </select>

          <button id="newTalentBtn" class="btn btn-primary bg-gradient-to-r from-green-500 to-teal-600">
            <i class="fa fa-plus mr-2"></i>添加人才
          </button>
        </div>

        <div id="talentsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- 人才列表 -->
          <div class="card">
            <div class="flex items-center gap-4">
              <img src="https://picsum.photos/200/200?random=2" alt="李四" class="w-16 h-16 rounded-full object-cover">
              <div class="flex-1">
                <h4 class="font-medium">李四</h4>
                <p class="text-sm text-gray-500 mt-1">前端开发 | 高级工程师</p>
                <div class="flex gap-2 mt-2">
                  <span class="badge bg-primary/20 text-primary text-xs">React</span>
                  <span class="badge bg-primary/20 text-primary text-xs">Vue</span>
                  <span class="badge bg-primary/20 text-primary text-xs">Tailwind</span>
                </div>
              </div>
              <span class="badge bg-success/20 text-success">忙碌</span>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100">
              <div class="flex justify-between items-center text-sm">
                <span class="text-gray-500">当前项目: 企业官网重构</span>
                <button class="text-primary hover:underline">详情</button>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="flex items-center gap-4">
              <img src="https://picsum.photos/200/200?random=3" alt="王五" class="w-16 h-16 rounded-full object-cover">
              <div class="flex-1">
                <h4 class="font-medium">王五</h4>
                <p class="text-sm text-gray-500 mt-1">后端开发 | 架构师</p>
                <div class="flex gap-2 mt-2">
                  <span class="badge bg-primary/20 text-primary text-xs">Java</span>
                  <span class="badge bg-primary/20 text-primary text-xs">Spring Boot</span>
                  <span class="badge bg-primary/20 text-primary text-xs">Microservices</span>
                </div>
              </div>
              <span class="badge bg-success/20 text-success">可用</span>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100">
              <div class="flex justify-between items-center text-sm">
                <span class="text-gray-500">当前项目: 无</span>
                <button class="text-primary hover:underline">详情</button>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="flex items-center gap-4">
              <img src="https://picsum.photos/200/200?random=4" alt="赵六" class="w-16 h-16 rounded-full object-cover">
              <div class="flex-1">
                <h4 class="font-medium">赵六</h4>
                <p class="text-sm text-gray-500 mt-1">DevOps | 工程师</p>
                <div class="flex gap-2 mt-2">
                  <span class="badge bg-primary/20 text-primary text-xs">Docker</span>
                  <span class="badge bg-primary/20 text-primary text-xs">Kubernetes</span>
                  <span class="badge bg-primary/20 text-primary text-xs">CI/CD</span>
                </div>
              </div>
              <span class="badge bg-success/20 text-success">可用</span>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100">
              <div class="flex justify-between items-center text-sm">
                <span class="text-gray-500">当前项目: 无</span>
                <button class="text-primary hover:underline">详情</button>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="flex items-center gap-4">
              <img src="https://picsum.photos/200/200?random=5" alt="钱七" class="w-16 h-16 rounded-full object-cover">
              <div class="flex-1">
                <h4 class="font-medium">钱七</h4>
                <p class="text-sm text-gray-500 mt-1">数据科学 | 分析师</p>
                <div class="flex gap-2 mt-2">
                  <span class="badge bg-primary/20 text-primary text-xs">Python</span>
                  <span class="badge bg-primary/20 text-primary text-xs">Pandas</span>
                  <span class="badge bg-primary/20 text-primary text-xs">Machine Learning</span>
                </div>
              </div>
              <span class="badge bg-danger/20 text-danger">休假</span>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-100">
              <div class="flex justify-between items-center text-sm">
                <span class="text-gray-500">当前项目: 数据分析平台</span>
                <button class="text-primary hover:underline">详情</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- 引入公共JS -->
  <script src="js/common.js"></script>
  <script>
    // 人才库页面特定JS
    document.addEventListener('DOMContentLoaded', function() {
      // 新建人才按钮事件
      const newTalentBtn = document.getElementById('newTalentBtn');
      if (newTalentBtn) {
        newTalentBtn.addEventListener('click', function() {
          // 添加人才逻辑
          showToast('添加人才功能将在此处实现');
        });
      }

      // 加载所有人才
      loadTalents();

      // 搜索和筛选事件
      const talentSearch = document.getElementById('talentSearch');
      const talentSkillFilter = document.getElementById('talentSkillFilter');
      const talentStatusFilter = document.getElementById('talentStatusFilter');

      if (talentSearch) {
        talentSearch.addEventListener('input', debounce(function() {
          filterTalents();
        }, 500));
      }

      if (talentSkillFilter) {
        talentSkillFilter.addEventListener('change', function() {
          filterTalents();
        });
      }

      if (talentStatusFilter) {
        talentStatusFilter.addEventListener('change', function() {
          filterTalents();
        });
      }
    });

    // 加载所有人才
    function loadTalents() {
      showLoading();
      api.getAllTalents()
        .then(talents => {
          renderTalents(talents);
          hideLoading();
        })
        .catch(error => {
          console.error('加载人才失败:', error);
          hideLoading();
          showToast('加载人才数据失败', 'error');
        });
    }

    // 筛选人才
    function filterTalents() {
      const searchTerm = document.getElementById('talentSearch').value.toLowerCase();
      const skillFilter = document.getElementById('talentSkillFilter').value;
      const statusFilter = document.getElementById('talentStatusFilter').value;

      showLoading();
      api.getAllTalents()
        .then(talents => {
          let filteredTalents = talents;

          // 应用搜索筛选
          if (searchTerm) {
            filteredTalents = filteredTalents.filter(talent =>
              talent.name.toLowerCase().includes(searchTerm) ||
              talent.position.toLowerCase().includes(searchTerm)
            );
          }

          // 应用技能筛选
          if (skillFilter) {
            filteredTalents = filteredTalents.filter(talent =>
              talent.skills.some(skill => skill.name === skillFilter)
            );
          }

          // 应用状态筛选
          if (statusFilter) {
            filteredTalents = filteredTalents.filter(talent =>
              talent.status === statusFilter
            );
          }

          renderTalents(filteredTalents);
          hideLoading();
        })
        .catch(error => {
          console.error('筛选人才失败:', error);
          hideLoading();
          showToast('筛选人才数据失败', 'error');
        });
    }

    // 渲染人才列表
    function renderTalents(talents) {
      const container = document.getElementById('talentsContainer');
      if (!container) return;

      // 清空容器
      container.innerHTML = '';

      if (!talents || talents.length === 0) {
        container.innerHTML = `
          <div class="col-span-full text-center py-12">
            <i class="fa fa-search text-gray-300 text-5xl mb-4"></i>
            <p class="text-gray-500">没有找到匹配的人才</p>
          </div>
        `;
        return;
      }

      // 渲染人才卡片
      talents.forEach(talent => {
        const card = document.createElement('div');
        card.className = 'card';

        // 构建技能标签HTML
        const skillsHtml = talent.skills.map(skill => `
          <span class="badge bg-primary/20 text-primary text-xs">${skill.name}</span>
        `).join('');

        // 设置卡片内容
        card.innerHTML = `
          <div class="flex items-center gap-4">
            <img src="${talent.avatar || 'https://picsum.photos/200/200?random=2'}" alt="${talent.name}" class="w-16 h-16 rounded-full object-cover">
            <div class="flex-1">
              <h4 class="font-medium">${talent.name}</h4>
              <p class="text-sm text-gray-500 mt-1">${talent.position} | ${talent.level}</p>
              <div class="flex gap-2 mt-2">
                ${skillsHtml}
              </div>
            </div>
            <span class="badge ${talent.status === '可用' ? 'bg-success/20 text-success' : talent.status === '忙碌' ? 'bg-warning/20 text-warning' : 'bg-danger/20 text-danger'}">${talent.status}</span>
          </div>
          <div class="mt-4 pt-4 border-t border-gray-100">
            <div class="flex justify-between items-center text-sm">
              <span class="text-gray-500">当前项目: ${talent.currentProject || '无'}</span>
              <button class="text-primary hover:underline" onclick="viewTalentDetail(${talent.id})">详情</button>
            </div>
          </div>
        `;

        container.appendChild(card);
      });
    }

    // 查看人才详情
    function viewTalentDetail(id) {
      // 这里可以实现跳转到人才详情页面的逻辑
      showToast(`查看人才ID: ${id} 的详情`);
    }

    // 防抖函数
    function debounce(func, wait) {
      let timeout;
      return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
      };
    }
  </script>
</body>
</html>